<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin-top: 0px;
        }

        .index-container {
            margin: 0px auto; /*设置DIV水平居中*/
            width: 90%;
            border: 0px solid red;
        }

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #fff;
            color: #333;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        /**卡片展示样式*/
        .image {
            width: 100%;
            height: 300px;
            display: block;
        }

        .book-container {
            width: 100%;
        }

        .book-header {
            width: 100%;
            display: flex; /*弹性布局*/
        }

        .book-header > div {
            width: 50%;
            border: 0px solid red;
        }

        .book-header > .book-image {
            text-align: center;
        }

        .book-image > img {
            width: 360px;
            height: 500px;
        }

        .book-header > .book-info > span {
            display: block;
            line-height: 0px;
            margin-left: 20px;
            margin-top: 50px;
            font-size: 20px;
            font-weight: bold;
        }

        .book-header > .book-info > span > label {
            color: red;
        }

        .book-body > .book-title, .bottom-title {
            width: 100%;
            height: 50px;
            background-color: #E6A23C;
            padding-left: 20px;
            color: #FFFFFF;
            font-size: 22px;
            line-height: 50px;
            font-weight: bold;
            letter-spacing: 5px; /*字间距*/
        }

        .book-body > .book-content {
            padding-left: 10px;
            line-height: 30px;
            text-indent: 2em; /*首行缩进*/
            letter-spacing: 3px;
            font-size: 16px;

        }
        .bottom-content {
            width: 100%;
            border: 0px solid green;
        }

        .comment-info {
            width: 100%;
            border: 0px solid red;
        }

        .comment-base-info {
            padding-left: 20px;
            background-color: #B3C0D1;
        }

        .comment-info > .comment-base-info span {
            display: inline-block;
            width: 40%;
            font-size: 16px;
            border: 0px solid blue;
            height: 30px;
            line-height: 30px;
            color: #FFFFFF;
            font-weight: bold;
        }

        .comment-message {
            letter-spacing: 3px;
            text-indent: 30px;
            font-size: 18px;
            line-height: 30px;
            padding: 10px 0px;
            border: 0px solid red;
        }
    </style>
</head>
<body>
<div id="index-container" class="index-container">
    <!--使用上中下布局容器-->
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <div class="book-container">
                <div class="book-header">
                    <div class="book-image">
                        <img :src="'images/books/'+book.book_image" alt="">
                    </div>
                    <div class="book-info">
                        <span>书名：{{book.book_name}}</span>
                        <span>单价：<label>¥{{book.book_price}}</label></span>
                        <span>
                            <el-input-number v-model="num" :min="1" :max="100"></el-input-number>
                            <el-button type="warning" style="font-size: 14px;"
                                       icon="el-icon-shopping-cart-full">加入购物车</el-button>
                        </span>
                    </div>
                </div>
                <div class="book-body">
                    <div class="book-title"><i class="el-icon-caret-right"></i>图书描述</div>
                    <div class="book-content">
                        {{book.book_desc}}
                    </div>
                </div>

                <div class="book-bottom">
                    <div class="bottom-title">
                        <i class="el-icon-caret-right"></i>图书评论
                    </div>

                    <div class="bottom-content">
                        <div v-if="commentList.length==0">
                            暂无评论
                        </div>

                        <div class="comment-info" v-for="commentView in commentList">
                            <div class="comment-base-info">
                                <span>评论人:{{commentView.user_name}}</span>
                                <span>评论时间:{{commentView.comment_time}}</span>
                            </div>
                            <div class="comment-message">{{commentView.comment_message}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
<!--先引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--再引入饿了么UI-->
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入axios组件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
    new Vue({
        el: '#index-container',
        data() {
            return {
                book_id: 0,//图书编号
                book: null,//表示图书对象
                commentList: [],
                num: 1,
            }
        },
        methods: {
            //获得url地址中的参数值
            getParameter() {
                //console.log(document.documentURI)
                //获取请求的url地址
                let url = document.documentURI;
                //从yrl中将参数截取
                let param = url.substring(url.indexOf("?") + 1);
                //从参数中获得参数名和参数值
                let paramArr = param.split("=");
                if (paramArr[0] == "book_id") {
                    this.book_id = paramArr[1];
                }
                console.log(param)
            },
            //获得图书详情的方法
            getBookDesc() {
                if (this.book_id == 0) {
                    alert("数据出错!");
                    return;
                }
                //向服务端发送请求
                axios.get('books/getBookDesc?book_id=' + this.book_id)
                    .then(response => {
                        //获得服务端回传的数据
                        this.book = response.data;
                    })
                    .catch(err => {
                        alert(err);
                    });
            },
            /*
            读取图书评论的信息
             */
            getComment() {
                if (this.book_id == 0) {
                    alert("数据出错!");
                    return;
                }
                axios.get('comment/getComment?book_id=' + this.book_id)
                    .then(response => {
                        //获得服务端回传的数据
                        this.commentList = response.data;
                    })
                    .catch(err => {
                        alert(err);
                    });
            }
        },
        //钩子函数-在页面dom构建之后立马执行
        created() {
            this.getParameter();
            this.getBookDesc();
            this.getComment();
        }
    })
</script>
</body>
</html>